<template>
  <div>
    <div class="wrapper">
      <div class="w-left"></div>
      <div class="w-right">
        <div class="wr-title">
          <div class="wt-item wi1">排名</div>
          <div class="wt-item wi2">游戏名称</div>
          <div class="wt-item wi3">出售物品描述</div>
          <div class="wt-item wi4">价格</div>
          <div class="wt-item wi5">成交时间</div>
        </div>
        <div class="wr-list">
          <div class="wl-item" v-for="(item, index) in list" :key="index">
            <div class="wi1">
              <span class="wi-index" :class="{one: index == 0, two: index == 1, three: index == 2}">{{index+1}}</span>
            </div>
            <div class="wi2">{{item.game_name}}</div>
            <div class="wi3">{{item.title}}</div>
            <div class="wi4" style="text-align: center; color: red;">{{item.price}}</div>
            <div class="wi5" style="text-align: center;">{{item.completion}}</div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <a-mentions v-model="value" @change="onChange" @select="onSelect">
        <a-mentions-option value="afc163">afc163</a-mentions-option>
        <a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
        <a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
      </a-mentions>
    </div>
  </div>
</template>

<script>
import { ORDER_SORT } from "./server";
export default {
  layout: "main",
  components: {

  },
  data() {
    return {
      list: [],
      value: ''
    };
  },
  created() {
    this.getOrder()
  },
  methods: {
    getOrder() {
      ORDER_SORT({
        page: 1,
        pageshow: 10
      }).then(res => {
        this.list = res.data
      })
    },
    onSelect(option) {
      console.log('select', option);
    },
    onChange(value) {
      console.log('Change:', value);
    },
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  display: flex;
  .w-left {
    width: 210px;
    height: 410px;
    background: url('https://oss.itemplay.com/asdqwel1jh23.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 10px;
  }
  .w-right {
    width: 980px;
    .wr-title {
      display: flex;
      background: #0084ff;
      color: #fff;
      line-height: 50px;
      font-size: 16px;
      .wt-item {
        text-align: center;
      }
    }
    .wr-list {
      .wl-item {
        font-size: 14px;
        display: flex;
        line-height: 36px;
      }
    }
  }
}
.wi1 {
  width: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  .wi-index {
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;

  }
  .one {
    color: #fff;
    background: #ff3a56;
  }
  .two {
    color: #fff;
    background: #1db8fe;
  }
  .three {
    color: #fff;
    background: #ff6716;
  }
}
.wi2 {
  width: 148px;
}
.wi3 {
  width: 454px;
  text-overflow :ellipsis;
  white-space :nowrap;
  overflow : hidden;
}
.wi4 {
  width: 120px;
}
.wi5 {
  width: 168px;
}
</style>